<template>
  <!-- 只能有一个div根标签 -->
   <div class='container'>
    <el-card class="box-card">
      <!-- 筛选 -->
      <el-row>
        <el-col :span="18">
          <el-form label-width="80px" :inline="true">
            <el-form-item label="学科名称">
              <el-input style="200px" v-model="items.subjectName"></el-input>
            </el-form-item>
            <el-form-item style="text-align:right">
              <el-button  @click="clear">清除</el-button>
              <el-button  type="primary" @click="filter">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="6" style="text-align:right">
          <el-button
          icon="el-icon-edit"
          type="success"
          @click="addDate"
          >新增学科</el-button>
        </el-col>
      </el-row>

      <!-- 消息提示 -->
      <el-alert
       :title="`数据一共 ${page.total} 条`"
        type="info"
        show-icon
       :closable="false"
       >
      </el-alert>

      <!-- 表格 -->
      <el-table :data='subjects'>
        <el-table-column type="index"  label="序号" />
        <el-table-column prop="subjectName" label="学科名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column   label="创建日期" width="180">
           <template slot-scope="scope">
             <span>{{scope.row.addDate|formatTime}}</span>
           </template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template slot-scope="scope">{{scope.row.isFrontDisplay===1?'是':'否'}}</template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" />
        <el-table-column prop="tags" label="标签" />
        <el-table-column prop="totals" label="题目数量" />
        <el-table-column label="操作" width="250">
          <!-- 作用域插槽 -->
          <template slot-scope="scop">
            <el-button  type="text" @click="btn1(scop.row)">学科分类</el-button>
            <el-button  type="text" @click="btn2(scop.row)">学科标签</el-button>
            <el-button  type="text"  @click="editSubject(scop.row)">修改</el-button>
            <el-button  type="text"  @click="deleteSubject(scop.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <!-- layout: 组件布局，子组件名用逗号分隔 -->
      <el-row type="flex" justify="end" text-align="middle"  style="margin-top:20px;text-align:right">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="page.total"
          :page-size='page.pagesize'
          :page-sizes="[5,10,20,50]"
          :current-page="page.page"
          @current-change='changePage'
          @size-change='changeItem'
          >
        </el-pagination>
      </el-row>

      <!-- 新增学科/修改学科弹层 -->
      <!-- sync是子组件去改变父组件的数据的一个语法糖 -->
      <SubjectsAdd ref='edit' :titleText="titleText" :showDialog.sync="showDialog" @getSubjectList='getSubjectList'></SubjectsAdd>

    </el-card>
   </div>
</template>

<script>
import { getSubjectList, removeSubject } from '@/api/hmmm/subjects'
import SubjectsAdd from '../components/subjects-add.vue' // 引入新增学科组件
import dayjs from 'dayjs'
export default {
  name: 'Subjects',
  data () {
    return {
      titleText: 0,
      showDialog: false,
      items: {},
      subjects: [], // 接收学科列表
      page: {
        page: 1,
        pagesize: 10,
        subjectName: '',
        total: 0
      }
    }
  },
  created () {
    this.getSubjectList()
  },
  mounted () {},
  components: {
    SubjectsAdd
  },
  props: {},
  computed: {},
  watch: {},
  methods: {
    // 清除筛选条件
    clear () {
      this.items.subjectName = ''
      this.getSubjectList()
    },
    // 进行筛选
    filter () {
      this.page.page = 1
      this.page.subjectName = this.items.subjectName
      this.getSubjectList()
    },

    // 获取学科列表
    async getSubjectList () {
      const { data } = await getSubjectList(this.page)
      this.subjects = data.items
      this.page.total = data.counts
    },
    // 改变页面，切换到当前页
    changePage (newPage) {
      this.page.page = newPage
      this.getSubjectList()
    },
    // 切换每页条数
    changeItem (newItem) {
      this.page.page = 1
      this.page.pagesize = newItem
      this.getSubjectList()
    },

    // 删除学科
    deleteSubject (subjects) {
      // 弹框询问用户是否删除数据
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await removeSubject(subjects)// 调用删除方法
          await this.getSubjectList()// 重新拉数据渲染
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } catch (err) {
          console.log(err)
        }
      })
    },

    // 新增学科
    addDate () {
      this.showDialog = true // 显示弹层
      this.titleText = 0
      this.page.subjectName = ''
    },

    // 修改学科
    async editSubject (obj) {
      // console.log(obj)
      // this.subjects = obj.subjectName
      // 实现数据回写-- 父组件调用子组件的数据和方法
      await this.$refs.edit.detail(obj.id)
      this.showDialog = true// 打开弹层
      this.titleText = 1
    },
    btn1 (subjectID) {
      this.$router.push({
        name: 'subjects-directorys',
        query: { subjectID }
      })
    },
    btn2 (subjectID) {
      this.$router.push({
        name: 'subjects-tags',
        query: { subjectID }
      })
    }

  },
  // 创建格式化时间的方法
  filters: {
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  }

}
</script>

<style scoped>

</style>
